<template>
  <!-- 弹框 -->
  <el-dialog
    v-if=" dialogShow"
    :title="formData.id ? '修改班级' : '添加班级'"
    :visible.sync=" dialogShow"
    @close="close"
  >
    <el-form v-if=" dialogShow" :model="formData" :inline="true">
      <el-row type="flex" justify="space-around">
        <el-form-item label="归属学科">
          <el-select
            v-model="formData.subject_id"
            placeholder="归属学科"
            size="small "
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="班级名称">
          <el-input
            v-model="formData.class_name"
            label="班级名称"
            size="small"
            style="width: 200px"
            placeholder="请输入班级名称"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="授课老师" label-width="120px">
          <el-select
            v-model="formData.teacher_info"
            placeholder="请选择"
            size="small "
            multiple
            @focus="getShoukeTeacher('讲师')"
          >
            <el-option
              v-for="item in teacherName"
              :key="item.user_id"
              :label="item.username"
              :value="item.user_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="助教老师"
          label-width="120px"
          style="margin-left: 55px"
        >
          <el-select
            v-model="formData.zhujiao_info"
            placeholder="请选择"
            size="small "
            multiple
            @focus="getZhujiaoTeacher('助教')"
          >
            <el-option
              v-for="item in zhujiaoName"
              :key="item.user_id"
              :label="item.username"
              :value="item.user_id"
            />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="班主任老师" label-width="120px">
          <el-select
            v-model="formData.manager_info"
            placeholder="请选择"
            size="small "
            multiple
            @focus="getManagerTeacher('班主任')"
          >
            <el-option
              v-for="item in managerName"
              :key="item.user_id"
              :label="item.username"
              :value="item.user_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="开课结课日期"
          label-width="120px"
          style="margin-left: 55px"
        >
          <el-date-picker
            v-model="Time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd hh:mm:ss"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="排序" label-width="120px">
          <el-input-number
            v-model="formData.sort"
            label="描述文字"
          />
        </el-form-item>
        <el-form-item
          label="班级状态"
          label-width="120px"
          style="margin-left: 55px"
        >
          <el-switch
            v-model="formData.state"
            :active-value="1"
            :inactive-value="2"
          />
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click=" dialogShow = false">取 消</el-button>
      <el-button type="primary" @click="btnOk">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  TeacherClassListApi,
  PutTagApi,
  PostClassApi,
  getClassName

} from '@/api/class'

export default {
  name: 'APPP',
  data() {
    return {
      formData: {
        sort: 10,
        class_name: '',
        state: '',
        subject_id: '',
        teacher_info: '[]',
        zhujiao_info: '[]',
        manager_info: '[]',
        start_time: '',
        end_time: '',
        id: ''
      },
      teacherName: [],
      managerName: [],
      zhujiaoName: [],
      Time: [],
      dialogShow: false,
      options: []

    }
  },
  created() {
    this.getClassName()
  },
  methods: {
    async getClassName() {
      this.options = await getClassName()
    },
    // 获取老师信息
    async getShoukeTeacher(name) {
      const res = await TeacherClassListApi({
        role_name: name
      })
      // console.log(Object.keys(res),Object.values(res));
      // console.log(Object.prototype.toString.call(res),Array.from(res));
      this.teacherName = res
    },
    async getZhujiaoTeacher(name) {
      const res = await TeacherClassListApi({
        role_name: name
      })
      console.log(res.data)
      this.zhujiaoName = res
    },
    async getManagerTeacher(name) {
      const res = await TeacherClassListApi({
        role_name: name
      })
      // console.log(res);
      this.managerName = res
    },

    // 确认添加
    async btnOk() {
      this.formData.start_time = new Date(
        new Date(this.Time[0]).getTime() + 8 * 3600 * 1000
      ).toISOString()
      this.formData.end_time = new Date(
        new Date(this.Time[1]).getTime() + 8 * 3600 * 1000
      ).toISOString()
      if (this.formData.id) {
        await PutTagApi({
          class_name: this.formData.class_name,
          subject_id: this.formData.subject_id,
          teacher_info: this.teacherName,
          zhujiao_info: this.zhujiaoName,
          manager_info: this.managerName,
          state: this.formData.state,
          sort: this.formData.sort,
          start_time: this.formData.start_time,
          end_time: this.formData.end_time,
          id: this.formData.id
        })
        this.$message.success('修改成功')
        this.dialogShow = false
        this.$emit('updateList')
      } else {
        await PostClassApi({
          class_name: this.formData.class_name,
          subject_id: this.formData.subject_id,
          teacher_info: this.formData.teacher_info.map(
            (username, item) => this.teacherName[item]
          ),
          zhujiao_info: this.formData.zhujiao_info.map(
            (username, item) => this.zhujiaoName[item]
          ),
          manager_info: this.formData.teacher_info.map(
            (username, item) => this.managerName[item]
          ),
          state: this.formData.state,
          sort: this.formData.sort,
          start_time: this.formData.start_time,
          end_time: this.formData.end_time
        })
        this.$message.success('添加成功')
        this.dialogShow = false
        console.log(this.formData.manager_info)
        // this.initData()
        this.$emit('updateList')
        this.close()
      }
    },
    close() {
      this.formData = {}

      this.teacherName = []
      this.managerName = []
      this.zhujiaoName = []
      this.Time = []
    }
  }

}
</script>
